<template>
  <div class="rose-echart">
    <base-echarts :option="option" chartHeight="240px" />
  </div>
</template>

<script setup lang="ts">
/*
  xxx-echart 负责将options配置做单独组件的封装
*/
import { computed } from "vue"
import BaseEcharts from "./Base-echarts.vue"
import type { EChartsOption } from "echarts"
import type { IEchartValueType } from "../types/index"

// prop传入图表数据
interface IProps {
  title: string
  data: IEchartValueType[]
}
const props = defineProps<IProps>()

// data由props中的数据传入,通过计算属性重新计算出option
const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      right: "2%",
      top: "12%",
      itemGap: 20,
      itemWidth: 16,
      itemHeigth: 16,
      icon: "rect",
      formatter: function (name) {
        var currentItem = props.data.find((item) => item.name === name)
        return "{nameSty|" + currentItem.name + "}\n" + "{numberSty|" + currentItem.value + "% }"
      },
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 12,
            color: "#FFFFFF",
            padding: [2, 2]
          },
          numberSty: {
            fontSize: 12,
            color: "#40E6ff",
            padding: [0, 0, 0, 2]
          },
          preSty: {
            fontSize: 10,
            color: "#40E6ff"
          }
        }
      }
    },
    series: [
      {
        name: props.title,
        type: "pie",
        // 内半径/外半径的大小
        radius: [30, 122],
        // 设置区域的位置
        center: ["50%", "50%"],
        left: "-44%",
        bottom: "-12%",
        avoidLabelOverlap: false,
        roseType: "area", // 圆心角一样, 通过半径的不同表示大小
        itemStyle: {
          borderRadius: 8
        },
        data: props.data,
        label: {
          show: false
        }
      }
    ]
  }
})
</script>

<style lang="less" scoped></style>
